<template>
  <ZZDialog class="tree-layer" title="局部三维风场">
    <div class="button">
      <div class="first-line">
        <el-upload
          action="#"
          :auto-upload="false"
          :on-change="handleFileChange"
          accept=".nc,.json"
          ref="upload"
          :show-file-list="false"
        >
          <el-button>选择文件</el-button>
        </el-upload>
        <el-checkbox v-model="windyVisible" label="显示" size="large" @change="toggleWindyVisibility" />
        <el-button :icon="Delete" @click="removeWindy" />
      </div>

      <el-form label-width="100px" style="max-width: 460px">
        <el-form-item label="线宽">
          <el-input-number v-model="windFieldConfig.lineWidth" />
        </el-form-item>
        <el-form-item label="线长倍数">
          <el-input-number v-model="windFieldConfig.lineLengthFactor" />
        </el-form-item>
        <el-form-item label="最大粒子数">
          <el-input-number v-model="windFieldConfig.maxParticles" />
        </el-form-item>
        <el-form-item label="抬升高度">
          <el-input-number v-model="windFieldConfig.particleHeight" />
        </el-form-item>
        <el-form-item>
          <el-button @click="freshAll">刷新</el-button>
          <el-button @click="centerAt">定位</el-button>
        </el-form-item>
      </el-form>

      <el-checkbox v-model="checkedSection" label="显示切面" />
      <div v-show="checkedSection" class="section-pan">
        <label class="mx-1">切面类型:</label>
        <el-select v-model="SectionType" class="m-2 section-select" placeholder="Select">
          <el-option v-for="item in SectionOptions" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
        <label class="mx-1">切面数值:</label>
        <el-input-number class="section-select" v-model="SectionValue" :min="0.0" :max="1.0" :step="0.1" />
        <el-button class="section-select" style="width: 50px" @click="freshSection">刷新</el-button>
      </div>
    </div>
  </ZZDialog>
</template>

<script setup>
import { ref, reactive, toRaw } from 'vue';
import { useViewer } from '../stores/viewer';
import { lineWindy } from '../utils/lineWindy/lineWindy.js';

import { Delete } from '@element-plus/icons-vue';
import ZZDialog from '@/common/ZZDialog.vue';

// 状态管理
const store = useViewer();
const isLoading = ref(false);
const upload = ref(null);

const windFieldConfig = reactive({
  lineWidth: 1,
  maxParticles: 10000,
  particleHeight: 0.0,
  lineLengthFactor: 3
});

// 截面相关
const SectionOptions = [
  {
    value: 'x',
    label: 'x'
  },
  {
    value: 'y',
    label: 'y'
  },
  {
    value: 'z',
    label: 'z'
  }
];
const SectionType = ref('x');
const SectionValue = ref(0.6);
const checkedSection = ref(true);

// 风场相关状态
let windyInstance = undefined;
const windyVisible = ref(false);

const handleFileChange = async file => {
  if (!file) return;
  isLoading.value = true;

  const param = toRaw(windFieldConfig);

  try {
    // 创建新的风场实例
    windyInstance = new lineWindy(store.viewer, {
      input: file.raw,
      userInput: param,
      fields: {
        H: '',
        U: 'U',
        V: 'V',
        W: 'W',
        lat: 'lat',
        lev: 'lev',
        lon: 'lon'
      },
      valueRange: {
        max: 100,
        min: -100
      },
      offset: {
        lat: 0,
        lev: 0,
        lon: 0
      }
    });

    // 初始化并显示风场
    await windyInstance.init();
    windyInstance.show();
    windyVisible.value = true;
  } catch (error) {
    console.error('Failed to load wind field', error);
    removeWindy();
  } finally {
    isLoading.value = false;
  }
};

const toggleWindyVisibility = () => {
  if (!windyInstance) return;
  if (windyVisible.value) {
    windyInstance.show();
  } else {
    windyInstance.hide();
  }
};

const removeWindy = () => {
  if (windyInstance) {
    windyInstance.remove();
    windyInstance = null;
    windyVisible.value = false;
  }

  if (upload.value) {
    upload.value.clearFiles();
  }
};

function freshSection() {
  if (!windyInstance) return;

  windyInstance.setSection(SectionType.value, SectionValue.value);
  windyInstance.fresh();
}

function freshAll() {
  if (!windyInstance) return;

  const param = toRaw(windFieldConfig);
  windyInstance.setUserInput(param);
  windyInstance.fresh();
}

function centerAt() {
  if (!windyInstance) return;
  windyInstance.centerAt();
}
</script>

<style scoped>
.tree-layer {
  position: absolute;
  top: 150px;
  left: 5px;
  background-color: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(32, 160, 255, 0.6);
  transition: all 0.3s ease;
  z-index: 100;
}

.tree-ctrl {
  position: absolute;
  top: 0px;
  right: 0px;
  cursor: pointer;
  width: 30px;
  height: 36px;
  text-align: center;
  line-height: 36px;
  color: #fff;
  font-size: 16px;
  transition: color 0.2s;
}

.tree-ctrl:hover {
  color: #ff4d4f;
}

.tree-show {
  width: 26px;
  height: 28px;
  text-align: center;
  line-height: 28px;
  background-color: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(32, 160, 255, 0.6);
  color: #fff;
  cursor: pointer;
  transition: color 0.2s;
  border-radius: 0 4px 4px 0;
}

.tree-show:hover {
  color: #ff4d4f;
}

.layer-tree-title {
  background-color: rgba(0, 0, 0, 0.5);
  height: 36px;
  line-height: 36px;
  padding-left: 8px;
  font-size: 14px;
  color: #fff;
  border-bottom: 1px solid;
  border-image: linear-gradient(90deg, #2e678f 0, #0cf 49%, rgba(22, 54, 103, 0) 100%) 1 1;
}

.button {
  margin: 10px;
  gap: 8px;
  align-items: center;
}

input[type='file'] {
  color: #fff;
  font-size: 12px;
  max-width: 150px;
}

/* 自定义滚动条 */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.2);
}

::-webkit-scrollbar-thumb {
  background: rgba(32, 160, 255, 0.5);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(32, 160, 255, 0.8);
}

.section-select {
  width: 180px;
  margin: 5px 5px;
}

.section-pan {
  display: flex;
  flex-direction: column;
  border: solid 1px black;
  padding: 6px;
}

.first-line {
  display: flex;
  gap: 8px;
}
</style>
